<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="generator" content="editplus"/>
    <link rel="stylesheet" type="text/css" href="../../css/loaders.css"/>
    <script type="text/javascript" src="../../js/startmove.js"></script>
    <style type="text/css">
        .content {
            color: #ffffff;
        }
        body , p { padding: 0; margin: 0;}
        .bg {
            background: url('../../images/7fa2d2b310d5333eefa3015b2af71517.jpeg');
            height:680px;
            text-align: center;
        }
        .bg-blur {
            float: left;
            width: 100%;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            -webkit-filter: blur(10px);
            -moz-filter: blur(10px);
            -o-filter: blur(10px);
            -ms-filter: blur(10px);
            filter: blur(10px);
        }
        .content-front {
            position:absolute;

            width: 100%;
            height:680px;
        }
        .top_head { width: 100%; height: 50px; color: #fff; text-align: center; line-height: 50px; background: rgba(0,0,0,.5)}
        .mess_content { width: 95%; max-height: 680px; margin: 0 auto; padding-top: 10px;}
        .mess_box { min-height: 40px; margin-bottom: 20px; clear: both; padding-top: 20px;}
        .u { vertical-align: middle; display: inline-block; width: 40px; height: 40px; background: red; position: relative;}
        .u p { width: 150px; font-size: 12px;
            position: absolute;
            top:-20px; color: #888;}
        .my { float: right;}
        .mess { display: inline-block; vertical-align: middle; min-width: 100px; min-height: 40px; line-height: 25px; max-width: 250px; background: #f57676; margin: 0 15px; padding: 0 10px; position: relative; border-radius: 5px;}
        .l_arr { width:0;
            height:0;
            border-top:8px solid transparent;
            border-bottom:8px solid transparent;
            border-right:8px solid #f57676; position: absolute;
            left:-8px; top: 8px;}
        .r_arr { width:0;
            height:0;
            border-top:8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 8px solid #f57676; position: absolute;
            right:-8px; top: 8px;}
        .hall { width: 32px;
            height:32px; background: url("./skin/hall.png"); position: absolute; left: 10px; top: 10px;}
        .setBar { width: 100px; height: auto; position: absolute; left: -100px; top: 50px; background: rgba(176,196,222,.9)}
        .setBar_list { width: 100px; height: auto;}
        .setBar_list p { width: 100%; height: 40px; line-height: 40px; text-align: center; border-bottom: 1px solid #B0E0E6;}
        .send_wrap { width: 100%; height: auto; position:fixed; bottom: 0; left:0; background: rgba(255,255,255,.4); padding-top: 8px;}
        .send_post_word { float: left; width: 80%; height: 35px; margin-left: 15px;}
        .send_post_word input[type='button'] { vertical-align: middle; width: 10%; height: 30px; background: url("../../images/emoji.png") no-repeat; border: none;}
        .send_post_word input[type='text'] { width: 81%; height: 30px; padding-left: 5%;}
        .pub { float: right; width: 32px; height: 32px; background: url("../../images/pub.png"); margin-right: 15px; margin-bottom: 15px;}
        .code_tips { width: 200px; height: 30px; background: rgba(0,0,0,.5); opacity: 0; position: fixed; bottom: 100px; left: 30%; color: #ccc; font-size: 12px; text-align: center; line-height: 30px; border-radius: 5px;}

        .createSendloading { width: 110px; height: 40px; position: fixed; bottom: 60px; background: rgba(0,0,0,0.5); left: 40%;}
        .loading_anmitaion {
            float: left; width: 30px; height: 30px;margin-left: 10px;}
        .loading_tips { float: left; width: auto; line-height: 40px;  color: #ccc; font-size: 13px;}
        .emoji { display: none; width: 100%; height: 110px; border-top: 1px solid #FCD2E9; clear: both; padding: 10px;}
        .emoji a { display: inline-block; width: 30px; height: 30px; margin: 5px 5px;}
        .emoji a img { width: 100%;
            height:100%;}
        .close—btn { display: inline-block; width: 32px; height: 32px; float: right; margin-right: 10px; margin-top: 10px; background: url("../../images/c2.png")}

    </style>
</head>
<body>
<div>
    <div class="bg bg-blur"></div>
    <div class="content content-front">
        <div class="top_head">
            <div class="hall" onclick="showHall()"></div>
            <p id="hall" style="display: inline-block">萌娘大厅</p><a href="JavaScript:;"
                                                                  class="close—btn"
                                                                  onclick="callAndiod()"></a></div>
        <div class="mess_content">

        </div>
    </div>
</div>
</div>
<div class="send_wrap">
    <div class="send_post_word">
        <input type="button" onclick="showFace()">
        <input type="text" placeholder="约吗">
    </div>
    <div class="pub" onclick="send()"></div>
    <div class="emoji">
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="../../js/jquery-1.9.1.js"></script>

<script>

    function showFace(){
        var emoji = document.getElementsByClassName("emoji")[0];
        if(emoji.style.display=='block') {
            emoji.style.display = "none";
        }else{
            emoji.style.display = "block";
        }

        loadFace();
    }

    function loadFace(){
         var fl=20;
         var faceHtml = '';
         for (var i=1;i<fl;i++){
               faceHtml+='<a href="javascript:;" onclick="addImage(this)" data-src='+i+'><img src="../../images/1082_1/'+i+'.gif" alt=""></a>';
         }
         document.getElementsByClassName('emoji')[0].innerHTML = faceHtml;
    }

    function addImage(obj){
         var send_post_word = document.getElementsByClassName("send_post_word")[0].getElementsByTagName('input')[1];
         var i = obj.getAttribute('data-src');
         send_post_word.value += "["+i+"]";
    }
    function creatLayout(Html){
        var Layout = document.createElement('div');
        Layout.className = 'code_tips';
        Layout.innerHTML = Html;
        document.body.appendChild(Layout);
        Move(Layout,'opacity',100);
        setTimeout(function(){
            Move(Layout,'opacity',0);
            setTimeout(function(){
                document.body.removeChild(Layout);
            },500)
        },1000)
    }
    var url = decodeURI(window.location.href);
    var rid = url.substring(url.lastIndexOf('rid=')+4,url.lastIndexOf("&"));
    var room = url.substring(url.lastIndexOf('room=')+5);
    document.getElementById("hall").innerHTML = room;
    loongpo();
    // 轮询
    function loongpo(){
        var url = 'http://aaa.57810.mom/index.php/chat/longpoing';
        data = {rid:rid};
        $.ajax({
            type : "get",
            url : url,
            dataType : "jsonp",
            data:data,
            jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
            jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
            success : function(json){
                if(json!='') {
                    var clientHeight = document.documentElement.clientHeight;
                    var docuH = document.documentElement.offsetHeight;
                    if (docuH > clientHeight) {

                        var clear = '';
                        var status = 0;
                        clear = setInterval(function () {
                            status++
                            if (status > 2) {
                                clearInterval(clear)
                            }
                            $(document).scrollTop(1000);
                        }, 100)
                    }
                }

                var mess_content = document.getElementsByClassName('mess_content')[0];
                var Html = "";
                for (var i=0;i<json.length;i++) {
                    if(json[i]['send']=='my'){
                        Html+="<div class='mess_box other'><span class='u'><p style='text-align: left;left: 0'>我</p></span><span class='mess'>"+json[i]['content']+"<b class='l_arr'></b></span></div>";
                    }else{
                        Html+="<div class='mess_box my'><span class='mess'>"+json[i]['content']+"<b class='r_arr'></b></span><span class='u'><p style='text-align: right;right: 0'>"+json[i]['uname']+"</p></span></div>";
                    }
                }
                mess_content.innerHTML+=Html;
            },
            error:function(){
                alert('fail');
            }
        });
    }

    setInterval(loongpo,3000);
    function createSendloading(){
         var loading_wrap = document.createElement("div");
         loading_wrap.className = 'createSendloading';
         var HTML = '<div class="loading_anmitaion"><div class="loader-inner ball-scale-multiple"><div></div><div></div><div></div></div></div><div class="loading_tips">正在发送中</div>';
         loading_wrap.innerHTML = HTML;
         document.body.appendChild(loading_wrap);
    }
    function timedec(){
         var timer = null;
         timer = setInterval(function(){
               if(time==0){
                     clearInterval(timer);
               }else {
                   time--;
               }
               document.title = time;
         },1000);
    }
    var time = 0;
    function send(){
         if(time!=0){
                return;
         }
         var messCon = document.getElementsByClassName('mess_content')[0];
         var send_post_word = document.getElementsByClassName('send_post_word')[0].getElementsByTagName('input')[1];
         if(send_post_word.value == ''){
                  creatLayout('您的内容的是空哒');
                  return false;
         }
        createSendloading();
        var data = {content:send_post_word.value,rid:rid};
        console.log(data);
        url = "http://aaa.57810.mom/index.php/chat/addMesage";
        $.ajax({
            type : "get",
            url : url,
            dataType : "jsonp",
            data:data,
            jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
            jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
            success : function(json){
                var clientHeight = document.documentElement.clientHeight;
                var docuH = document.documentElement.offsetHeight;
                if (docuH > clientHeight) {
                    var clear = '';
                    var status = 0;
                    clear = setInterval(function () {
                        status++
                        if (status > 2) {
                            clearInterval(clear)
                        }
                        $(document).scrollTop(1000);
                    }, 100)
                }
                if(json['code']==200) {
                    HTML = " <div class='mess_box other'><span class='u'><p>我</p></span><span class='mess'>" +json['obj']['content'] + "<b class='l_arr'></b></span></div>";
                    messCon.innerHTML += HTML;
                    time = 5;
                    document.body.removeChild(document.getElementsByClassName('createSendloading')[0]);
                    timedec();
                }else{

                }
            },
            error:function(){
                alert('fail');
            }
        });

    }

    function callAndiod(){
        android.exitchat();
    }

</script>